<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">甲蛙支付平台</a>
  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="text-end px-3" id="header">
    <span class="px-3">您好：{{member.name}}</span>
    <a @click="logout" type="button" class="btn-dark btn-sm">退出登录</a>
  </div>

  <script>
    let { createApp, ref, onMounted, computed } = Vue;
    let header = createApp({
      setup() {
        const member = computed(() => store.state.member);
        console.log(member.value);

        // 退出登录
        const logout = () => {
          axios.delete('/system/member/logout/' + member.value.token).then((response) => {
            const data = response.data;
            if (data.success) {
              // 清空前端登录缓存
              store.setMember = {};
              // 跳到登录页面
              window.location.href="/login";
            } else {
              Msg.error(data.message);
            }
          });
        };

        onMounted(() => {
        });

        return {
          member,
          logout
        }
      }
    });
    header.mount("#header");
  </script>
</header>
